<template>
    <div style="padding-left:5px;">
<!--        distanceShown:{{distanceShown}}-->
        <el-row>
            <el-col align="left">
                <el-form label-width="100px">
                    <el-form-item label="距离：">
                        <el-input-number v-model="distance" :min="1" :max="10000" :step="100" @change="goHome"></el-input-number>米
                    </el-form-item>
                    <el-form-item label="甲速度：">
                        <el-input-number v-model="v1" :min="1" :max="1000" :step="50" @change="goHome"></el-input-number>米/秒
                    </el-form-item>
                    <el-form-item label="乙速度：">
                        <el-input-number v-model="v2" :min="1" :max="1000"  :step="50" @change="goHome"></el-input-number>米/秒
                    </el-form-item>
                    <el-form-item label-width="0" style="padding-left: 10px;">
                        甲耗时：{{parseInt(timeDiff1 / 1000)}}秒
                        甲路程：{{parseInt(distance1PassedShown)}}米
                        乙耗时：{{parseInt(timeDiff2 / 1000)}}秒
                        乙路程：{{parseInt(distance2PassedShown)}}米
                    </el-form-item>
                </el-form>
            </el-col>
        </el-row>
        <el-row>
            <el-col align="left">
                <el-button type="primary" @click="goHome">回到起点</el-button>
                <el-button type="primary" @click="start">（重新）开始</el-button>
                <el-button type="primary" @click="pause" v-if="!stopped">{{paused ? '恢复' : '暂停'}}</el-button>
            </el-col>
        </el-row>
        <div style="padding-left:10px;">
            <v-stage ref="stage" :config="stageSize" >
                <v-layer ref="layer">
                    <v-line :config="{
                    x: 0,
                    y: 100,
                    points: [0, 0, distanceShown, 0],
                    tension: 0.5,
                    closed: true,
                    stroke: 'black',
                    fillLinearGradientStartPoint: { x: -50, y: -50 },
                    fillLinearGradientEndPoint: { x: 50, y: 50 },
                    fillLinearGradientColorStops: [0, 'red', 1, 'yellow']
                  }"/>


                    <v-circle ref="circle1" :config="{x: distance1PassedShown, y: 80, radius: 5, fill: 'green'}"/>
                    <v-circle ref="circle2" :config="{x: distance2PassedShown, y: 120, radius: 5, fill: 'red'}"/>

                </v-layer>
            </v-stage>
        </div>
    </div>

</template>

<script>
    import Konva from "konva";

    export default {
        data() {
            return {
                width: window.innerWidth - 50,
                height: 200,
                windowInnerWidth: 0,
                anim: null,
                distance: 600,
                timeDiff1: 0,
                v1: 100,
                distance1Passed: 0,
                distance1PassedShown: 0,

                timeDiff2: 0,
                v2: 150,
                distance2Passed: 0,
                distance2PassedShown: 0,
                paused: false,
                stopped: true,
            };
        },
        methods: {
            start() {
                this.goHome()
                this.stopped = false
                this.anim.start();
            },
            pause() {
                this.paused = !this.paused
            },
            stop() {
                this.paused = false
                this.stopped = true
                if(this.anim) {
                    this.anim.stop()
                }
            },
            goHome() {
                this.anim.stop();
                this.paused = false
                this.stopped = true
                this.timeDiff1 = 0
                this.timeDiff2 = 0
                this.distance1Passed = 0
                this.distance1PassedShown = 0
                this.distance2Passed = 0
                this.distance2PassedShown = 0
            },
            changeSize(e) {
                // to() is a method of `Konva.Node` instances
                e.target.to({
                    scaleX: Math.random() + 0.8,
                    scaleY: Math.random() + 0.8,
                    duration: 0.2
                });
            },
            renderResize() {
              this.windowInnerWidth = window.innerWidth - 50
              this.goHome()
            },
        },
        computed: {
          stageSize() {
            return {
              width: this.windowInnerWidth,
              height: this.height
            }
          },
          distanceShown() {
              return Math.min(this.distance, this.windowInnerWidth - 50)
          }
        },
        mounted() {
            this.windowInnerWidth = window.innerWidth
            const vm = this;
            window.addEventListener("orientationchange", this.renderResize, false)

            const circle1 = this.$refs.circle1.getNode();
            this.anim = new Konva.Animation(function(frame) {
                if(!vm.paused) {
                    // console.log('frame.timeDiff:', frame.timeDiff)

                    if (vm.distance1Passed < vm.distance) {
                        let delta1 = vm.v1 * (frame.timeDiff / 1000);
                        vm.timeDiff1 += frame.timeDiff
                        vm.distance1Passed += delta1
                    }

                    if (vm.distance2Passed < vm.distance) {
                        let delta2 = vm.v2 * (frame.timeDiff / 1000);
                        vm.timeDiff2 += frame.timeDiff
                        vm.distance2Passed += delta2
                    }

                    if(vm.distance1Passed > vm.distance) {
                        vm.distance1Passed = vm.distance
                    }

                    if(vm.distance2Passed > vm.distance) {
                        vm.distance2Passed = vm.distance
                    }

                    if (vm.distance1Passed >= vm.distance && vm.distance2Passed >= vm.distance) {
                        vm.stop()
                    }

                    vm.distance1PassedShown = vm.distanceShown * vm.distance1Passed / vm.distance
                    vm.distance2PassedShown = vm.distanceShown * vm.distance2Passed / vm.distance
                }
            }, circle1.getLayer());

        }
    };
</script>
